<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>defineProperty</title>
</head>
<body>
  <div id="app"></div>
  <script>
      // 模拟vue中的data
      let data = {
          msg: 'hello world',
          count: 20
      }

      // 模拟vue实例
      let vm = {}
      proxyData(data)

      function proxyData (d) {
          Object.keys(d).forEach(key => {
              // 数据劫持 当访问或者设置vm中成员的时候 做一些干预操作
              Object.defineProperty(vm, key, {
                  // 是否可枚举
                  enumerable: false,
                  // 可配置
                  configurable: true,
                  // 获取值的时候调用
                  get() {
                      console.log('get:', data[key])
                      return data[key]
                  },
                  // 设置值的时候调用
                  set(newData) {
                      console.log('set:', newData)
                      if(newData === data[key]) return
                      data[key] = newData
                      document.querySelector('#app').textContent = data[key]
                  }
              })
          })
      }

      vm.msg = 'hello China'
      console.log(vm.msg)
  </script>
</body>
</html>